<template>
  <div class="login">
    <a-form class="login-box" :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
      <a-form-item label="账号:">
        <a-input v-model="form.name" />
      </a-form-item>
      <a-form-item label="密码:">
        <a-input v-model="form.pwd" />
      </a-form-item>
      <a-form-item class="submit-box" :wrapper-col="{ span: 12, offset: 6 }">
        <a-button class="ct_submit" @click="handleSubmit">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
const Cookie = process.client ? require("js-cookie") : undefined;
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import config from "../utils/config";
@Component({
  middleware: "auth",
  head() {
    return {
      title: "登录",
      titleTemplate: "%s - by 刘洋博客",
    };
  },
})
export default class extends Vue {
  form: Object = {};
  $message: any;
  $router: any;
  $store: any;

  created() {}

  async handleSubmit() {
    const res = await this.$axios.$post(
      config.BASE_URL + "/api/account/login",
      this.form
    );
    if (res.c) {
      this.$router.push("/admin");
      this.$store.commit("getUserInfo", res.d.token);
      return;
    }
    this.$message.error(res.m);
  }
}
</script>

<style lang="scss" scoped>
.login {
  background-color: #eaeaea;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  &-box {
    background: #fff;
    width: 500px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -250px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
  }
  .submit-box {
    text-align: center;
  }
}
</style>

